<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>仓库列表</title>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Complex DataGrid - jQuery EasyUI Demo</title>
	<script type="text/javascript" src="../statics/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
	<!-- 引入JQuery -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/jquery.min.js"></script>
	<!-- 引入EasyUI -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
	<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
	<!-- 引入EasyUI的样式文件-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/themes/default/easyui.css" type="text/css"/>
	<!-- 引入EasyUI的图标样式文件-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/themes/icon.css" type="text/css"/>
	<style type="text/css">
		#dt tr th {text-align: center}
		#dt tr td {text-align: center}
		#dt {width:400px;height: 200px;padding-left:20px;padding-top: 10px;padding-right:20px;} 
	</style>
	<script>
		$(function(){
			$('#test').datagrid({
				url:'../statics/json/texidome.json',
				fitColumns:true,
				title:'我的仓库',
				iconCls:'icon-save',
				width:600,
				height:240,
				nowrap: true,
				striped: true,
				collapsible:true,
				sortName: 'code',
				sortOrder: 'desc',
				remoteSort: false,
				idField:'code',
				iconCls:'icon-save', 
				frozenColumns:[[
	                {field:'code',checkbox:true},
				]],
				   columns:[[
					{field:'address',title:'地址',width:150,align:'center',formatter:function(value){
						return "<a herf='#' style='color:red;'>"+value+"</a>";
					}},
					{field:'smm',title:'面积',width:40,align:'center'},
					{field:'typeone',title:'微型车',width:60,align:'center'},
					{field:'typetwo',title:'小型车',width:60,align:'center'},
					{field:'typethree',title:'轻型车',width:60,align:'center'},
					{field:'typefour',title:'中型车',width:60,align:'center'},
					{field:'nownum',title:'库存',width:40,align:'center',
						styler:function(value,row,index){
							if(value <= 0 || value > 20){
								return 'background-color:red;';
							}
						}	
					},
					{field:'pic',title:'图片展示',width:200,align:'center'}
				]], 
				onClickCell:function(index,field,v){
					if(field=="address"){
						var id = $(this).datagrid("getRows")[index].code;
						console.log("----"+id);  // 传递数据获取数组
						/* 	$.ajax({
								type:"GET",
								url:"../statics/json/texidome.json",
								dataType:"json",
								success:function(data){
									
								},
							});	 */		
					   /*    */
						/* 使用数据进行传递 */
						$("#dt").dialog({
							title: v,    
						    width: 600,    
						    height: 300,    
						    closed: false,    
						    cache: false,  
						    modal: true,
						    buttons:[{
								text:'Ok',
								iconCls:'icon-ok',
								handler:function(){
									alert('ok');
								}
							},{
								text:'Cancel',
								handler:function(){
									$('#dd').dialog('close');
								}
							}],
						})
 						/* $('#dt').dialog('refresh', 'carlist.jsp'); */
					}
				},
				pagination:true,
				rownumbers:true,
				toolbar:[{
					id:"code",
					text:'修改',
					iconCls:'icon-add', 
					handler:function(){
						$('#btnsave').linkbutton('enable');
						var v = $("#test").datagrid('getChecked');
						if(v.length == 1){
							console.log(v[0].code);  // 供后者传递值进行针对性修改数据
							$("#dlg").dialog({    
							    title: '修改车辆',    
							    width: 450,    
							    height: 520,    
							    closed: false,    
							    cache: false,  
							    resizable: true,
							    modal: true,
							}); 
						}else{
							alert("仅当只能选中一个!");
						}
					}
				},{
					id:"code",
					text:'删除',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						var v = $("#test").datagrid('getChecked');
						if(v.length > 0){
							var b = confirm("确定进行删除?");
							if(b == true){
								console.log(v); // 传递选中的数组 ,在后台进行遍历,在后台进行重定向到页面,会进行整个页面数据的刷新
								window.location.href="index.html"; 
							}
						}else{
							alert("请你选中!");
						}
					}
				}]
			});
			var p = $('#test').datagrid('getPager');
			console.log(p);	
			$(p).pagination({
				onBeforeRefresh:function(){
					alert('before refresh');
				}
			});
		});
	</script>
</head>
<body>
	<div style="margin:10px 0;">
		<form >
			<input type="text" name="" value="仓库地址"/>
			<input type="submit" name="" value="搜索">			
		</form>		
	</div>
	<table id="test"></table>
	
	<!-- 修改仓库数据 -->
	<div id="dlg" style="display:none;width:450px;height:500px;" >
		 <div style="padding-left:30px;padding-top: 40px;">
		    <form id="ff" method="post" action="${pageContext.request.contextPath }/managerCar/AddCarNews.do">
		    	<table cellpadding="5">
		    		<tr>
		    			<td>仓库地址:</td>
		    			<td><input class="easyui-textbox" type="text" name="cartype" data-options="required:true" style="width: 250px;height: 30px;"></input></td>
		    		</tr>
		    		<tr>
		    			<td>仓库面积:</td>
		    			<td><input class="easyui-textbox" type="text" name="inprice" data-options="required:true" style="width: 250px;height: 30px;"></input></td>
		    		</tr>
		    		<tr>
		    			<td>微型汽车车位:</td>
		    			<td><input class="easyui-textbox" type="text" name="outprice" data-options="required:true" style="width: 250px;height: 30px;"></input></td>
		    		</tr>
		    		<tr>
		    			<td>小型汽车车位:</td>
		    			<td><input class="easyui-textbox" type="text" name="outprice" data-options="required:true" style="width: 250px;height: 30px;"></input></td>
		    		</tr>
		    		<tr>
		    			<td>轻型汽车车位:</td>
		    			<td><input class="easyui-textbox" type="text" name="outprice" data-options="required:true" style="width: 250px;height: 30px;"></input></td>
		    		</tr>
		    		<tr>
		    			<td>中型汽车车位:</td>
		    			<td><input class="easyui-textbox" type="text" name="outprice" data-options="required:true" style="width: 250px;height: 30px;"></input></td>
		    		</tr>
		    		<tr>
		    			<td>库存:</td>
		    			<td><input class="easyui-textbox" type="text" name="zhizao" data-options="required:true" style="width: 250px;height: 30px;"></input></td>
		    		</tr>
		    		<tr>
		    			<td>图片展示:</td>
		    			<td><input type="file" class="easyui-textbox" name="pic" ></input></td>
		    			<td><font color="red"></font></td>
		    		</tr>
		    	</table>
		    </form>
		    <div style="text-align:center;padding:5px">
		    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
		    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>
				<a href="${pageContext.request.contextPath }/CarManager/showcarlist.jsp" class="easyui-linkbutton" onclick="closeForm()">关闭</a>
		    </div>
	    </div>
	</div>
	<!-- 查找数据仓库中的车辆数据 -->
	<table id="dt" style="display:none;" border="1" cellpadding="0" cellspacing="0">   
        	<tr>
        		<th >品牌</th>  
        		<th >车辆尺寸</th> 
	            <th >车型</th>   
	            <th >进价</th> 
	            <th >售价</th>   
	            <th >库存</th>   
        	</tr>
			<tr>				
				<td>奔驰</td>  
        		<td>中型</td>  
        		<td>suv</td>  
        		<td>45w</td>  
        		<td>56w</td>  
        		<td>12</td>  
			</tr>
			<tr>				
				<td>奔驰</td>  
        		<td>中型</td>  
        		<td>suv</td>  
        		<td>45w</td>  
        		<td>56w</td>  
        		<td>12</td>  
			</tr>  
			<tr>				
				<td>奔驰</td>  
        		<td>中型</td>  
        		<td>suv</td>  
        		<td>45w</td>  
        		<td>56w</td>  
        		<td>12</td>  
			</tr>    
			<tr>				
				<td>奔驰</td>  
        		<td>中型</td>  
        		<td>suv</td>  
        		<td>45w</td>  
        		<td>56w</td>  
        		<td>12</td>  
			</tr>        		 
	</table>
</body>
</html>